import React, { useState, useCallback, useContext } from 'react'
import { PublishWrap } from './styledPublish'
import Taro from '@tarojs/taro'
import {
  View,
  RadioGroup,
  Label,
  Radio,
  Input,
  Button,
  Text
} from '@tarojs/components'

import miniContext from '../../context/minipet-db'

import Feedback from '../../components/feedback'

let staticData = {
  type: 'sell'
}

export default function Publish() {
  let [address, setAddress] = useState('点击选择，请勾选哦~')
  let [isSubmit, setIsSubmit] = useState(false)
  let [isSucc, setIsSucc] = useState(false)

  let minipet = useContext(miniContext)

  const handleAddressTap = useCallback(() => {
    Taro.chooseLocation({
      success: (res) => {
        let {
          latitude,
          longitude,
          address
        } = res

        staticData.latitude = latitude
        staticData.longitude = longitude

        setAddress(address)
      }
    })
  }, [address])

  const handleRadioChange =  useCallback((e) => {
    staticData.type = e.detail.value
  }, [])

  const handleMessageTap = useCallback((e) => {
    staticData.message = e.detail.value
  }, [])

  const handleContactTap = useCallback((e) => {
    staticData.contact = e.detail.value
  }, [])

  const showInfo = useCallback((title) => {
    Taro.showToast({
      title,
      icon: 'none',
      duration: 2000
    })
  }, [])

  const handleSubmitTap = useCallback(() => {
    if (address === '点击选择，请勾选哦~') {
      showInfo('请选择地址')
      return
    }

    if (staticData.message === '') {
      showInfo('请输入说明')
      return
    }

    if (staticData.contact === '') {
      showInfo('请输入联系方式')
      return
    }

    let data = {
      ...staticData,
      address,
    }

    minipet.add({
      data,
      success: (result) => {
        setIsSucc(true)
      },
      fail: (error) => {
        setIsSucc(false)
      },
      complete: () => {
        setIsSubmit(true)
      }
    })
  }, [address, staticData])

  return (
    <PublishWrap>
      {
        !isSubmit ? (
          <View class="publish-wrap">
            <View class="item">
              <View class="label">
                我的地址
              </View>
              <View class="content" onClick={handleAddressTap}>
                {address}
              </View>
            </View>
            <View class="item">
              <View class="label">
                类型
              </View>
              <View class="content">
                <RadioGroup onChange={handleRadioChange}>
                  <Label>
                    <Radio value="buy" checked="true"/> 求购
                  </Label>
                  <Label>
                    <Radio value="sell"/> 转让
                  </Label>
                </RadioGroup>
              </View>
            </View>
            <View class="item">
              <View class="label">
                说明
              </View>
              <View class="content">
                <input placeholder="请输入说明" onInput={handleMessageTap} />
              </View>
            </View>
            <View class="item">
              <View class="label">
                联系方式
              </View>
              <View class="content">
                <Input placeholder="请输入联系方式" onInput={handleContactTap} />
              </View>
            </View>
            <View class="btn">
              <Button onClick={handleSubmitTap}>发布信息</Button>
            </View>
          </View>
        ) : (
          <Feedback onChangeSubmit={setIsSubmit} isSubmit={isSubmit} isSucc={isSucc} />
        )
      }
    </PublishWrap>
  )
}